<template>
  <div class="order">

      <p class="allTitle"><a onclick="window.history.go(-1)"></a>我的订单</p>

      <div class="tabItem">
          <p class="loading" v-if="!loadStart"><span></span></p>
          <div class="list" v-if="loadStart">

              <div v-if="date.length>0">
                  <ul>
                    <li v-for="item in date">
                      <div class="listTop">
                        订单号：{{item.trade_no}}<span>{{item.status|startList}}</span>
                      </div>
                      <div class="listCont" v-for="list in item.order_items">
                        <img :src="list.goods_logo" :onerror="imgError" >
                        <div class="info">
                          <p class="stitle">{{list.goods_name}}</p>
                          <p class="num"><span class="price">{{list.total_price}}</span> x {{list.goods_count}}</p>
                        </div>
                      </div>
                      <div class="listBotton">
                        总价：<span>¥{{item.order_amount}} </span><button @click="goOrderDes(item.id)">订单详情</button>
                      </div>
                    </li>
                  </ul>
              </div>

              <div class="notGoods" v-if="date.length<1">
                  <div class="cartBg">
                      <em></em>
                      <p>您还没有下单！</p>
                      <router-link tag="a" to="/">马上去购物</router-link>
                  </div>
              </div>

          </div>
      </div>

  </div>
</template>

<script>
import {Get} from '@/config/api.js'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'order',
  data () {
    return {
      loadStart:false,
      date:[]
    }
  },
  computed:{
      ...mapState({
      imgError: 'imgError'
    })
  },
  mounted(){
    this.getData()
  },
  filters:{
    startList:function(e){
        switch(e) 
          { 
          case 1: 
            return '未付款'
            break; 
          case 2: 
            return '已付款待发货'
            break; 
          case 3: 
            return '已发货'
            break;
          case 4: 
            return '已收货'
            break;
          case 5: 
            return '已评价'
            break;
          case 6: 
            return '关闭'
            break;
          default: 
            return '错误状态'
          } 
    }
  },
  methods: {
    //请求数据
    getData(){
      let that=this
      Get('/order?_include=address,order_items,user',this.$store.state.token).then(function(reg){
        that.date=reg.data
        that.loadStart=true
      })
    },
    //跳转到详情页
    goOrderDes(e){
      this.$router.push({path:'/orderDes',query: { id: e }})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.tab ul{display: flex; flex-wrap: nowrap; justify-content: space-between;background: #fff}
.tab ul li{text-align: center;line-height: h(90);font-size: h(34);color: #406266;width: 20%}
.tab ul li.active{background: #38b6f0;color: #fff}

.list{padding-bottom: h(112)}
.list ul li{margin-top: h(20)}
.list .listTop{line-height: h(90);padding: 0 h(30);font-size: h(26);background: #fff;overflow:hidden;}
.list .listTop span{font-size: h(30);float: right}
.listCont{padding: h(20) h(30);overflow: hidden;background: #f5f5f5;}
.listCont img{width: h(160);height: h(160);float: left;}
.listCont .info{width: h(500);padding-left: h(20);float: left;text-align: left;color: #406266;font-size: h(30);}
.listCont .info .stitle{height:h(80);overflow: hidden;}
.listCont .num{font-size: h(28);margin-top: h(14)}
.listCont .price{color: #fd7b58;}
.list .listBotton{line-height: h(100);font-size: h(30);padding: 0 h(30);background: #fff}
.list .listBotton span{color: #fd7b58;font-size: h(38)}
.list .listBotton button{float: right;width: h(190);height: h(60);border: none;margin-top: h(20);border-radius: h(6);background: #38b6f0;font-size: h(30);color: #fff}


.cartBg{text-align: center;padding-top: h(80)}
.cartBg em{width: h(319);height: h(252);background: url('/static/images/cart.png');background-size: 100%;display: block;margin: auto;}
.cartBg p{font-size: h(36);color:#c8c7c9;margin-top: h(30)}
.cartBg a{display: block;font-size: h(30);width: h(280);height:h(70);line-height: h(70);border-radius: h(8);background: #fd7b58;color: #fff;text-decoration: none;text-align: center;margin: auto;margin-top: h(70);}

</style>
